<template>
	<view>
		<block v-if="data.list.length>0">
			<block v-for="(item,index) in data.list" :key="index">
				<view class="card" style="padding-bottom:0rpx">
					<view class="list">
						<view class="rigth_box">
							<view class="title" style="margin-bottom: 24rpx;">
								{{item.villageName}}
							</view>
							<view class="list_tip">
								楼栋房号：{{item.roomNo}}
							</view>
							<view class="list_tip">
								委托时间：{{item.delegateTime}}
							</view>
							<view class="list_tip">
								委托价格：<text style="color: #EE7930;">¥{{item.price}}元/月</text>
							</view>
						</view>
						<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/1.png" mode="aspectFit"
							class="state_icon" v-if="item.status == 0">
						</image>
						<image src="/pagesA/static/hoom/3.png" mode="aspectFit" class="state_icon"
							v-if="item.status == 1">
						</image>
						<image src="/pagesA/static/hoom/4.png" mode="aspectFit" class="state_icon"
							v-if="item.status == 2">
						</image>

					</view>
					<view class="line" v-if=" item.status == 2" />
					<view class="handle_box" v-if=" item.status == 2">
						<view class="btn complete_btn" v-if=" item.status == 2" @click="handleClick(item.id)">
							重新委托
						</view>
						<!-- <view class="btn complete_btn">
						查看房源
					</view> -->
					</view>

				</view>
			</block>
		</block>
		<block v-else>
			<view class="dis" style="width: 100%;height: 60vh;">
				<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
					<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/noData.png" mode="aspectFit"
						style="width: 200rpx;height: 200rpx;">
					</image>
					<text>暂无数据</text>
				</view>
			</view>
		</block>
		<view style="width: 100%;height: 200rpx;"></view>
		<view class="bottom_box">
			<view class="add_btn" @click="handleClick('')">
				新增委托
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		reactive
	} from 'vue';
	import {
		getDelegates,
	} from './js/api.js'
	import http from '@/uitls/http.js'
	import {
		onReachBottom,
		onPageScroll,
		onShow
	} from '@dcloudio/uni-app'
	const app = getApp()
	const data = reactive({
		list: [],
		params: {
			pageNum: 1,
			pageSize: 10
		},
		isReach: true
	})
	onMounted(() => {
		// getData(data.params)
	})
	const initData = () => {
		data.isReach = true
		data.params = {
			pageNum: 1,
			pageSize: 10
		}
		getData(data.params)
	}
	onShow(() => {
		initData()
	})
	const getData = async (objs) => {

		let res = await getDelegates(objs)

		console.log(res)
		if (res.data.code != 0) {
			return http.isMssage(res.data.message)
		}
		if (res.data.data.list.length < 10) {
			data.isReach = false
		}
		let list = res.data.data.list
		if (objs.pageNum == 1) {
			data.list = list
		} else {
			data.list = data.list.concat(list)
		}
	}
	// const getRenterPage = async(objs)=>{
	// 	let res = await renterPage(objs)
	// 	console.log(res)
	// 	if (res.data.code != 0) {
	// 		return http.isMssage(res.data.message)
	// 	}
	// 	if (res.data.data.list.length < 10) {
	// 		data.isReach = false
	// 	}
	// 	data.list = res.data.data.list
	// }
	const handleClick = (id) => {
		if (!app.globalData.realNameFlag) {
			http.toAuth(0)
			return false
		}
		uni.navigateTo({
			url: '/pagesA/addEntrust/addEntrust?id=' + id
		})
	}

	onReachBottom(() => {
		// console.log('上拉触底')
		if (!data.isReach) return
		data.params.pageNum++
		getData(data.params)
	})
</script>
<style>
	page {
		background: #F6F6F6 !important;
	}
</style>
<style lang="less" scoped>
	.tabBar {
		width: 100%;
		height: 88rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.itemsTOp {
			width: 33%;
			height: 100%;
			font-family: PingFangSC-Regular;
			font-size: 28rpx;
			color: #4E4E4E;
			text-align: center;
			line-height: 28rpx;
			font-weight: 400;
			// border: 1px solid;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			.lins {
				background: #EE7930;
				border-radius: 5rpx;
				width: 36rpx;
				height: 4rpx;
				position: absolute;
				bottom: 0;
			}
		}

		.selectClass {
			font-family: PingFangSC-Semibold;
			font-size: 32rpx;
			color: #333333;
			text-align: center;
			line-height: 28rpx;
			font-weight: 600;
		}
	}

	.card {
		margin-top: 16rpx;
		padding: 30rpx;
		background: #FFFFFF;

		.list {
			display: flex;
			margin-bottom: 16rpx;
			position: relative;

			.photo {
				width: 230rpx;
				height: 204rpx;
				margin-right: 24rpx;
			}

			.rigth_box {
				.title {
					font-family: PingFangSC-Semibold;
					font-size: 30rpx;
					color: #000000;
					line-height: 36rpx;
					font-weight: 600;
					margin-bottom: 12rpx;
				}

				.title_1 {
					font-family: ArialMT;
					font-size: 24rpx;
					color: #666666;
					line-height: 26rpx;
					font-weight: 400;
					margin-bottom: 12rpx;
				}

				.address_box {
					display: flex;
					align-items: center;
					margin-bottom: 12rpx;

					image {
						width: 24rpx;
						height: 24rpx;
						margin-right: 8rpx;
					}

					text {
						font-family: PingFangSC-Regular;
						font-size: 24rpx;
						color: #666666;
						line-height: 26rpx;
						font-weight: 400;
					}
				}

				.price {
					font-family: Arial-BoldMT;
					font-size: 32rpx;
					color: #EE7930;
					// text-align: right;
					// line-height: 36rpx;
					font-weight: 700;
					margin-bottom: 12rpx;

					text {
						font-family: PingFangSC-Regular;
						font-size: 24rpx;
						color: #EE7930;
						text-align: right;
						// line-height: 36rpx;
						font-weight: 400;
					}
				}

				.label_box {
					display: flex;
					align-items: center;

					text {
						font-family: PingFangSC-Regular;
						font-size: 20rpx;
						color: #666666;
						// line-height: 24rpx;
						font-weight: 400;
						margin-right: 8rpx;
						padding: 4rpx 8rpx;
						background: #F2F2F2;
						border-radius: 4rpx;
					}
				}

				.list_tip {
					font-family: PingFangSC-Regular;
					font-size: 24rpx;
					color: #666666;
					// line-height: 26rpx;
					font-weight: 400;
					margin-bottom: 16rpx;
				}
			}

			.state_icon {
				position: absolute;
				right: 0rpx;
				top: 0rpx;
				width: 90rpx;
				height: 90rpx;
			}
		}

		.line {
			background: #eeeeee;
			height: 1rpx;
			// margin: 0 30rpx;
		}

		.handle_box {
			height: 86rpx;
			display: flex;
			justify-content: flex-end;
			align-items: center;

			.btn {
				height: 54rpx;
				width: 132rpx;
				line-height: 54rpx;
				text-align: center;
				font-family: PingFangSC-Regular;
				font-size: 24rpx;
				font-weight: 400;
				border-radius: 8rpx;
			}

			// .cancel_btn {
			// 	border: 2rpx solid rgba(238, 121, 48, 1);
			// 	color: #EE7930;
			// 	margin-right: 16rpx;

			// }

			.complete_btn {
				background: #EE7930;
				color: #FFFDFC;

			}
		}
	}

	.bottom_box {
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 30rpx 0 60rpx 0;
		background: #FFFFFF;
		width: 100%;

		.add_btn {
			width: 626rpx;
			height: 90rpx;
			line-height: 90rpx;
			background-image: linear-gradient(270deg, #F1B13F 0%, #F8D648 100%);
			border-radius: 50rpx;
			font-family: PingFangSC-Regular;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			font-weight: 400;
		}
	}
</style>